<template>
  <el-card>
    <el-row justify="space-between">
      <el-col :span="24">
        <!-- 搜索条件form，按“搜索”按钮，搜索 -->
        <el-form
          inline
          :model="searchParams"
          label-width="80px"
          label-position="left"
        >
          <el-form-item label="订单状态">
            <el-select
              v-model="searchParams.status"
              :empty-values="[null, undefined]"
              style="width: 200px"
            >
              <!-- 1待付款，2待派送，3已派送，4已完成，0已取消   -->
              <el-option label="全部" value="" />
              <el-option label="已取消" value="0" />
              <el-option label="待付款" value="1" />
              <el-option label="待派送" value="2" />
              <el-option label="派送中" value="3" />
              <el-option label="已完成" value="4" />
            </el-select>
          </el-form-item>

          <el-form-item label="订单日期">
            <el-date-picker
              v-model="orderDateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="选择开始日期"
              end-placeholder="选择结束日期"
              value-format="YYYY-MM-DD"
              @change="onChangeDateRange"
            />
          </el-form-item>
          <br />
          <el-form-item label="订单号">
            <el-input
              v-model.number="searchParams.number"
              placeholder="请输入订单号"
            />
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="getOrderList()">搜索</el-button>
            <el-button type="info" @click="goReset()">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>

    <!-- 以下是表格 
      表格支持用以下方式统一设置内容居中
      :cell-style="{ 'text-align': 'center' }"
    -->
    <el-row>
      <el-col>
        <!-- table通过该expand-row-keys属性设置 Table 目前的展开行 -->
        <el-table
          stripe
          :data="orderList"
          style="width: 100%"
          @expand-change="onExpandOrderDetail"
          :row-key="getRowKeys"
          :expand-row-keys="expands"
          :header-cell-style="{ 'text-align': 'center', background: '#f7f7f7' }"
        >
          <el-table-column type="expand">
            <template #default="scope">
              <div style="margin: 0 200px 0 60px">
                <el-descriptions
                  title="订单详情"
                  border
                  size="small"
                  column="1"
                >
                  <el-descriptions-item
                    :label="detail.name"
                    v-for="detail in scope.row.orderDetails"
                    :key="detail.id"
                    >&times;{{ detail.number }}份</el-descriptions-item
                  >
                </el-descriptions>
              </div>
            </template>
          </el-table-column>

          <el-table-column
            label="订单号"
            width="180"
            align="center"
            prop="number"
          ></el-table-column>
          <el-table-column
            label="订单状态"
            width="80"
            align="center"
            prop="status"
          >
            <template #default="{ row }">
              <!--   1待付款，2待派送，3已派送，4已完成，0已取消  -->
              <span v-if="row.status === 1">待付款</span>
              <span v-if="row.status === 2">待派送</span>
              <span v-if="row.status === 3">已派送</span>
              <span v-if="row.status === 4">已完成</span>
              <span v-if="row.status === 0">已取消</span>
            </template>
          </el-table-column>
          <el-table-column
            label="收货人"
            width="80"
            align="center"
            prop="consignee"
          ></el-table-column>
          <el-table-column
            label="手机号"
            width="120"
            align="center"
            prop="phone"
          ></el-table-column>
          <el-table-column
            label="派送地址"
            align="center"
            prop="address"
            width="260px"
          >
          </el-table-column>

          <el-table-column
            prop="orderTime"
            label="下单时间"
            align="center"
            width="180px"
          >
          </el-table-column>

          <el-table-column
            prop="updateTime"
            label="订单金额"
            align="center"
            width="100px"
          >
            <template #default="scope">
              &yen;{{ scope.row.amount / 100 }}
            </template>
          </el-table-column>

          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small" @click="onOpenDetail(scope.row)">
                查看详情
              </el-button>
              <el-button
                type="primary"
                size="small"
                v-if="scope.row.status === 2"
                @click="onDeliveryOrder(scope.row)"
              >
                派送
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 以下是分页 -->
    <el-row>
      <el-col>
        <el-pagination
          style="margin-top: 15px"
          v-model:current-page="searchParams.page"
          v-model:page-size="searchParams.pageSize"
          :page-sizes="[5, 10, 20]"
          layout="->,total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="getOrderList"
          @current-change="getOrderList"
          background
        />
      </el-col>
    </el-row>
  </el-card>

  <!-- 详情对话框 -->
  <order-detail ref="orderDetailRef" />
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { Search } from '@element-plus/icons-vue'
import { reqGetOrderList, reqDeliveryOrder } from '@/api/order'
import { ElMessage } from 'element-plus'
import OrderDetail from '@/views/order/OrderDetail.vue'

// 与搜索表单元素绑定的订单日期，数组，索引0是开始日期，索引1是结束日期
const orderDateRange = ref(['', ''])
const onChangeDateRange = (val) => {
  // console.log(val)
  searchParams.value.beginTime = val[0]
  searchParams.value.endTime = val[1]
}

//条件搜索
const searchParams = ref({
  page: 1,
  pageSize: 5, //默认是5
  number: '',
  status: '',
  beginTime: '',
  endTime: ''
})

//分页
const total = ref(0)
//分页查询员工列表
const orderList = ref([])
const getOrderList = async () => {
  const res = await reqGetOrderList(searchParams.value)
  // console.log(res.data)
  orderList.value = res.data.data.records
  total.value = res.data.data.total
}
//onMounted
onMounted(() => {
  getOrderList()
})

//订单派送
const onDeliveryOrder = async (order) => {
  order.status = 3
  const res = await reqDeliveryOrder(order)
  console.log(res.data)
  if (res.data.code === 200) {
    ElMessage.success(res.data.msg)
  } else {
    ElMessage.error(res.data.msg)
  }
}

//展开订单详情展示
const expands = ref([]) //当前展开行的key存放在此数组中
const onExpandOrderDetail = (row, expandedRows) => {
  //row 被点击当前行的数据
  //expandedRows 存放页面中被展开行的数据,对应的数组就是 expand-row-keys 属性的绑定值
  //通过expandedRows长度来判断用户点击是展开还是折叠
  if (expandedRows.length > 0) {
    //是展开操作
    expands.value = [] //先干掉之前展开的行
    if (row) {
      expands.value.push(row.id) //push新的行 (原理有点类似防抖)
    }
  } else {
    expands.value = [] //是折叠操作，就清空expand-row-keys对应的数组
  }
}

let getRowKeys = (row) => {
  //row是当前行的数据,给每行绑定唯一的标识
  // console.log('row', row)
  return row.id
}

//打开订单详情对话框
const orderDetailRef = ref(null)
const onOpenDetail = (order) => {
  orderDetailRef.value.open(order)
}

//重置搜索表单
const goReset = () => {
  searchParams.value = {
    page: 1,
    pageSize: 5, //默认是5
    number: '',
    status: '',
    beginTime: '',
    endTime: ''
  }
  orderDateRange.value = ['', '']
  getOrderList()
}
</script>

<style scoped></style>
